<template>
  <div class="mypage">
    <!-- 头部 -->
    <div class="header">
      <div class="hbg"></div>
      <div class="car">
        <p class="top">{{ username }}</p>
        <span class="gxqm">哈哈哈哈啊哈哈哈哈</span>
        <div class="ca-context">
          <div class="item">
            <p>已完成</p>
            <p class="chara">{{ this.finish }}</p>
          </div>
          <div class="item">
            <p>待服务</p>
            <p class="chara">13</p>
          </div>
          <div class="item">
            <p>已支付</p>
            <p class="chara">67</p>
          </div>
          <div class="item">
            <p>余额</p>
            <p class="chara">2319</p>
          </div>
        </div>
      </div>
      <div class="photo">
        <van-image round width="5rem" height="5rem" :src="userFace" />
      </div>
    </div>
    <!-- 中间 -->
    <div class="millde">
      <div class="main1">
        <van-cell
          is-link
          style="color: gray"
          title="实名认证"
          @click="shiming"
        />
        <van-cell is-link style="color: gray" title="提现" @click="tixian" />
        <van-dialog v-model="show_tixian" title="提现" show-cancel-button>
          <van-field
            name="pattern"
            label="金额"
            placeholder="金额"
            :rules="[{ pattern, message: '请填写金额' }]"
          />
        </van-dialog>

        <van-cell
          is-link
          style="color: gray"
          title="收益信息"
          @click="income"
        />
        <van-cell
          is-link
          style="color: gray"
          title="个人信息"
          @click="myinfo"
        />
      </div>

      <van-button
        class="but"
        round
        color="linear-gradient(to right, #a1c4fd, #c2e9fb)"
        @click="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

import { get, post } from "@/http/axios.js";
export default {
  data() {
    return {
      pattern: /\d{6}/,
      userFace: "",
      show_tixian: false,
      username: "",
      employeeId: "",
      finish: "",
    };
  },
  computed: {},
  methods: {
    tixian() {
      this.show_tixian = true;
    },
    shiming() {
      this.$router.push({
        path: "/shiming",
      });
    },
    myinfo() {
      this.$router.push({
        path: "/myinfo",
      });
    },
    income() {
      this.$router.push({
        path: "profit",
      });
    },
    async getAllinfoCategoryData(values) {
      let data = {
        page: 1,
        pageSize: 10,
        // roleId: 1,
        username: localStorage.getItem("username"),
      };
      let res = await get("/baseUser/pageQuery", data);
      this.username = localStorage.getItem("username");
      this.userFace = res.data.data.list[0].userFace;
      this.employeeId = res.data.data.list[0].id;
    },

    async getOrderData() {
      let data = {
        page: 1,
        pageSize: 10,
        status: "已完成",
        employeeId: this.employeeId,
      };
      let res = await get("/order/pageQuery", data);
      this.finish = res.data.data.total;
    },

    async logout() {
      this.$router.push({
        path: "/",
      });
      await post("/user/logout");
    },
  },
  created() {
    this.getAllinfoCategoryData();
    this.getOrderData();
  },
  mounted() {},
};
</script>


<style scoped>
.hbg {
  position: absolute;
  top: 0;
  width: 100%;
  background: #7cabf7;
  background: -webkit-linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  height: 180px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.car {
  position: absolute;
  width: 90%;
  height: 170px;
  background-color: #fff;
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  margin-left: 5%;
}

.photo {
  width: 50%;
  height: 80px;
  position: absolute;
  margin-left: 23%;
  top: 30px;
}
.millde {
  position: absolute;
  width: 100%;
  margin-top: 230px;
}
.but {
  width: 53%;
  margin-top: 30px;
}
.mypage {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main1 {
  text-align: left;
  width: 95%;
  margin-left: 15px;
}
.top {
  margin-top: 50px;
  margin-bottom: 0px;
}
.ca-context {
  margin-top: 0px;

  display: flex;
  justify-content: space-evenly;
}
.gxqm {
  font-size: 12px;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.081em;
  font-weight: 300;
  color: #081fa3;
}
.chara {
  color: #081fa3;
  font-weight: 600;
}
</style>